@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-modal';

$sizes: 's', 'm', 'l';

.modal {
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  transform: translate(-50%, -50%);

  display: flex;
  flex-direction: column;

  box-sizing: border-box;
  width: 100%;
  max-width: calc(100% - ($space-modal-outside-gap * 2));
  max-height: calc(100vh - ($space-modal-outside-gap * 2));

  background-color: simple-var($sys-neutral-background1-level);
  outline: none;

  @each $size in $sizes {
    &[data-size="#{$size}"] {
      @include composite-var($modal, 'window', $size);
    }
  }
}

.headerElements {
  @include composite-var($modal, 'header-elements', 'container');
  @include composite-var($modal, 'header-elements', 'elements-layout');

  position: absolute;
  top: 0;
  right: 0;
  display: flex;
}
